<template>
	<Modal  title="回复KEY选择" v-model="show" :closable="false"  width="800"
	:mask-closable="false" >
			
        		<Table :loading="loading" :columns="columns" :data="wxMsgReplys" border >
                 </Table>
                      		 <div style="margin: 10px;overflow: hidden">
							        <div style="float: right;">
							            <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
							        </div>
   						 </div>

   					<div slot="footer">
				         	    	<el-button    @click="cancel">取消</el-button>
				         	    	<el-button type="primary" @click="ok">确定</el-button>
				      </div>
	
</Modal>
</template>
<script>

	export default{
		name:"ActiveChoise",
		data(){
			return {
					choiseId:null,
					modalShow:this.show,
					loading:false,
					queryParams:{
							
					},
					others:{
							
					},
					wxMsgReply:{},
			 		page:{
			 			total:0,
			 			current:1,
			 			pageSize:10
			 		},
			 		wxMsgReplys:[

			 		],
				columns:[
						    {
			 				title:'关键字',
			 				key:'key',
			 				width:130,
			 				align:'center'
							}
							,{
			 				title:'回复内容',
			 				key:'content',
			 			
			 				align:'center'
							},
							 {
			 				title:'备注',
			 				key:'remark',
			 				width:130,
			 				align:'center'
							}
							,{
			 				title:'类型',
			 				key:'type',
			 				width:130,
			 				align:'center',
			 				render:(h,params)=>{
			 						var row=params.row;
			 						var text="系统预定义";
			 						var styles={color:'#fff',padding:'2px'};
			 						if(row.type==0){
				 						text="自定义";
				 						styles.backgroundColor="#bbbec4";
			 						}
			 						else{
			 							styles.backgroundColor="#5cb85c";
			 						}
			 						return h("div",[
			 							h("span",{style:styles},text)
			 							
			 						]);
			 				}
			 				}	
							
							,{
			 				title:'操作',
			 				key:'state',
							width:130,
			 				align:'center',
			 				render:(h,params)=>{
			 					var row=params.row;
			 					var bts=[];
			 					if(row.key==this.choiseId)
			 					{
			 						bts.push(
			 						h("Button",{style:{marginRight:"5px"},props:{size:"small",type:"ghost"},on:{click:()=>{
										this.unChoise(row);
									}}},"取消"));
									
			 					}
			 					else{
			 						bts.push(h("Button",{style:{marginRight:"5px"},props:{size:"small",type:"primary"},on:{click:()=>{
										this.choise(row);
									}}},"选择"));
			 					}
								return h("div",bts);
							}
						}
					]
			};
		},
		mounted:function(){
			this.choiseId=this.cid;
			
			this.getList();
		},
		props:[
			'cid','show'
		],

		methods:{
			choise:function(row){
				this.wxMsgReply=row;
				this.choiseId=row.key;
			
			},
			unChoise:function(){
				this.wxMsgReply={};
				this.choiseId=null;
			
			},
			 cancel:function(){
			 
			 	 this.$emit('cancel');
			 },
			 ok:function(){

			 	if(this.choiseId==null||this.choiseId==undefined)
			 	{
			 		this.errorMessage("请选择回复Key");
			 		return ;
			 	}
 				this.$emit('ok',this.wxMsgReply);
			 },
			cbtime:function(value)
			{
				this.others;
			},
			search:function(){
				this.page.current=1;
				this.page.total=0;
				this.getList();
			},
			reset:function(){
				this.queryParams={};
				this.getList();
			},
			choise:function(row){
				this.wxMsgReply=row;
				this.choiseId=row.key;
			
			},
			unChoise:function(){
				this.wxMsgReply={};
				this.choiseId=null;
			
			},
			changePage(current){
				this.page.current=current;
				this.getList();
			},
			getList:function(){
				var me=this;
				var params=me.queryParams;
				 params.current=me.page.current;
				 params.pageSize=me.page.pageSize;
				 me.loading=true;
				me.$http.post("/sys/wxmsgreply/getList.action",params).then(response=>{
					var body=response;
					if(body.status==0){
						me.page.total=body.obj.totalCount;
						me.wxMsgReplys=body.obj.list;
						
					}
					 me.loading=false;
				},response=>{
					 me.loading=false;
				});
			}
		}
	}
</script>
<style scoped>

</style>